import { useFeatureLayer } from '@/hooks/map/useFeatureLayer';
import { get } from 'lodash';
import { Fragment } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import './LayerTreeNode.less';

/**
 * 图层树节点组件
 */

interface LayerTreeNodeProps {
    node: any;
    mapInstance: any;
    viewInstance: any;
    onIconClick?: any;
    onLayerLoad?: any;
    expandedNodes: any;
    onToggleExpand: any;
}

const LayerTreeNode = ({
    node,
    mapInstance,
    viewInstance,
    onIconClick,
    onLayerLoad,
    expandedNodes,
    onToggleExpand
}: LayerTreeNodeProps) => {
    const [isExpanded, setIsExpanded] = useState(expandedNodes.includes(node.id));

    const { isLoaded, isVisible, loading, toggleLayer, unloadLayer } = useFeatureLayer({
        type: node.type,
        url: node.featureUrl,
        iconUrl: node.iconUrl,
        mapInstance,
        viewInstance,
        options: {
            visible: get(node, 'visible', 'false') === 'true' ? true : false,
            onIconClick: onIconClick,
            onLayerLoad: onLayerLoad,
        }
    });

    // 同步展开状态
    useEffect(() => {
        setIsExpanded(expandedNodes.includes(node.id));
    }, [expandedNodes, node.id]);

    const handleToggleExpand = () => {
        onToggleExpand(node.id);
    };

    const handleCheckboxChange = () => {
        toggleLayer();
    };

    const handleUnload = () => {
        unloadLayer();
    };

    return (
        <div className="layer-tree-node">
            <div className="node-header">
                <span
                    className={`expand-icon ${isExpanded ? 'expanded' : ''}`}
                    onClick={handleToggleExpand}
                >
                    {node.children && (isExpanded ? '▼' : '►')}
                </span>

                <input
                    type="checkbox"
                    checked={isLoaded && isVisible}
                    onChange={handleCheckboxChange}
                    disabled={loading}
                />

                <span
                    className="node-icon"
                    // onClick={handleIconClick}
                    title={node.description || node.name}
                >
                    {node.iconUrl ? (
                        <img src={node.iconUrl} alt={node.name} width={16} height={16} />
                    ) : (
                        '📍'
                    )}
                </span>

                <span className="node-label">{node.name}</span>

                {/* {isLoaded && (
                    <button
                        className="unload-btn"
                        onClick={handleUnload}
                        title="卸载图层"
                    >
                        ×
                    </button>
                )} */}

                {loading && <span className="loading-indicator">⏳</span>}
            </div>

            {isExpanded && node.children && (
                <div className="node-children">
                    {node.children.map((child: any) => (
                        <Fragment key={`${child.id}-feature-layer-tree-node-${Date.now()}`}>
                            <LayerTreeNode
                                node={child}
                                mapInstance={mapInstance}
                                viewInstance={viewInstance}
                                onIconClick={onIconClick}
                                onLayerLoad={onLayerLoad}
                                expandedNodes={expandedNodes}
                                onToggleExpand={onToggleExpand}
                            />
                        </Fragment>
                    ))}
                </div>
            )}
        </div>
    );
};

export default LayerTreeNode;